<template>
	<div class="alarmConfiguration zy-content">
		<search :columns="searchData" @getSearch="getSearch(arguments)" key="search"></search>
		<div class="list-layout mt16">
			<div class="btns clear">
				<span class="title">{{ $t('common.listInformation') }}</span>
				<Button @click="exportTemplateClick">
					{{ $t('common.batchExport') }}
				</Button>
				<Button v-has="'wareNumImp'" @click="importExcelShow"> 导入 </Button>
			</div>
			<!-- 表格 -->
			<div class="tableContent">
				<Table
					class="resizable-table"
					border
					@on-column-width-resize="onColumnWidthResize"
					:columns="columnsList"
					ellipsis
					ref="selection"
					stripe
					:data="dataArr"
					@on-selection-change="onSelectChange"
				>
					<template slot-scope="{ row }" slot="action">
						<span class="operationBtn" @click="showRowDetail2(row)">
							<i class="iconfont zy-common-bianji"></i>
							详情
						</span>
						<!-- <span class="operationBtn" @click="delPrrShowH(row)">
							<i class="iconfont zy-common-shanchu"></i>
							{{ $t('common.Delete') }}
						</span> -->
					</template>
					<template slot-scope="{ row }" slot="model">
						<span class="row_click" @click="showRowDetail(row)">
							{{ row.batchNumber }}
						</span>
					</template>
				</Table>
			</div>
			<!-- 分页 -->
			<div class="pageWrap mt16">
				<pageLeftTitle :total="total" :selected="delIds.length" />
				<Page
					:total="total"
					:page-size="pageSize"
					:page-size-opts="pageSizeOption"
					:current="pageNum"
					@on-change="changePageNum"
					@on-page-size-change="changePageSize"
					show-sizer
					show-total
				/>
			</div>
		</div>
		<Modal :mask-closable="false" v-model="showDetailDialog" title="批次属性" class="modal-content-layout" width="55%">
			<div class="alarmConfiguration">
				<div class="list-layout2">
					<!-- 表格 -->
					<div class="tableContent mt14">
						<!-- {{ dataArr2 }}{{ delIds2 }} -->
						<Table
							class="resizable-table"
							border
							@on-column-width-resize="onColumnWidthResize"
							:columns="columns2"
							ellipsis
							ref="selection"
							stripe
							:data="dataArr2"
							@on-selection-change="onSelectChange2"
						></Table>
					</div>
				</div>
			</div>
		</Modal>
		<Modal :mask-closable="false" v-model="showDetailDialog3" title="详情" class="modal-content-layout" width="55%">
			<div class="alarmConfiguration">
				<div class="list-layout2">
					<!-- 表格 -->
					<div class="tableContent mt14">
						<Table
							class="resizable-table"
							border
							@on-column-width-resize="onColumnWidthResize"
							:columns="columns3"
							ellipsis
							ref="selection"
							stripe
							:data="dataArr3"
							@on-selection-change="onSelectChange3"
						></Table>
					</div>
				</div>
				<div class="pageWrap mt16">
					<pageLeftTitle :total="total3" />
					<Page
						:total="total3"
						:page-size="pageSize3"
						:page-size-opts="pageSizeOption"
						:current="pageNum3"
						@on-change="changePageNum3"
						@on-page-size-change="changePageSize3"
						show-sizer
						show-total
					/>
				</div>
			</div>
		</Modal>
		<importExcelModal
			:importExcelStateF="importExcelState"
			v-if="importExcelState"
			@importExcelChange="importExcelChange"
			url="/dms/warehouseDetails/import"
		></importExcelModal>
	</div>
</template>

<script>
import { getUserSelect, getBackup } from '@/api/index.js';
import importExcelModal from '@/components/importExcelNew.vue';
import fileDownload from 'js-file-download';
import toggleTableOperation from '@/mixins/toggleTableOperation';
import search from '@/components/curd/searchList.vue';

export default {
	name: 'detailsQuery',
	mixins: [toggleTableOperation],
	components: { search, importExcelModal },
	data() {
		return {
			wareHouseList: [],
			showDetailDialog: false,
			backupList: [],
			shelfList: [],
			locationList: [],
			importExcelState: false /*批量导入*/,
			formItem: {},
			addtitle: '',
			allCheck: false,
			loading: false,
			create: false,
			searchParams: {},
			pageNum: 1,
			pageSize: 10,
			total: 0,

			pageNum2: 1,
			pageSize2: 10,
			total2: 0,

			pageNum3: 1,
			pageSize3: 10,
			total3: 0,
			searchData: [
				{
					title: '仓库位置',
					key: 'warehouseLocation',
					type: 'cascader',
					dicUrl: '/basic/organization/findListByToken?level=0',
					params: {
						label: 'name',
						value: 'code',
						children: 'children',
					},
				},
				{
					title: '仓库名称',
					key: 'warehouseName',
				},
				{
					title: '物料编号',
					key: 'materialCode',
				},
				{
					title: '物料名称',
					key: 'materialName',
				},
				{
					title: '物料类型',
					key: 'materialType',
				},
				{
					title: '批次号',
					key: 'batchNumber',
				},
				{
					title: '产品牌号',
					key: 'materialMark',
				},
				{
					title: '图号规格',
					key: 'customMaterialCode',
				},
				{
					title: '创建人',
					key: 'createName',
				},
				{
					title: '创建时间',
					key: 'time',
					type: 'datetimerange',
					format: 'yyyy-MM-dd HH:mm:ss',
				},
			],
			columns: [
				{
					title: '仓库位置',
					key: 'warehouseLocation',
					minWidth: 100,
					align: 'center',
					resizable: true,
				},

				{
					title: '仓库名称',
					key: 'warehouseName',
					minWidth: 100,
					align: 'center',
					resizable: true,
				},
				{
					title: '物料编号',
					key: 'materialCode',
					minWidth: 100,
					align: 'center',
					resizable: true,
				},
				{
					title: '物料型号',
					key: 'materialModel',
					minWidth: 100,
					align: 'center',
					resizable: true,
				},
				{
					title: '物料名称',
					key: 'materialName',
					minWidth: 100,
					align: 'center',
					resizable: true,
				},
				{
					title: '物料类型',
					key: 'materialType',
					minWidth: 100,
					align: 'center',
					resizable: true,
				},
				{
					title: '库存数量',
					key: 'inventoryQuantity',
					minWidth: 100,
					align: 'center',
					resizable: true,
				},
				{
					title: '批次号',
					key: 'batchNumber',
					minWidth: 100,
					slot: 'model',
					align: 'center',
					resizable: true,
				},
				{
					title: '产品牌号',
					key: 'materialMark',
					minWidth: 100,
					align: 'center',
					resizable: true,
				},
				{
					title: '图号规格',
					key: 'customMaterialCode',
					minWidth: 100,
					align: 'center',
					resizable: true,
				},
				{
					title: '创建人',
					key: 'createName',
					minWidth: 100,
					align: 'center',
					resizable: true,
				},
				{
					title: `${this.$t('common.CreateTime')}`,
					key: 'createTime',
					minWidth: 100,
					align: 'center',
					resizable: true,
				},
				{
					//title: '操作',
					title: `${this.$t('common.operation')}`,
					slot: 'action',
					fixed: 'right',
					minWidth: 160,
					align: 'center',
				},
			],
			columns2: [
				// {
				//     key: "selection",
				//     type: "selection",
				//     width: 60,
				//     align: "center",
				// },
				{
					title: '序号',
					key: 'index',
					type: 'index',
					width: 100,
					align: 'center',
				},
				{
					title: '批次属性',
					key: 'name',
					minWidth: 200,
					align: 'center',
					resizable: true,
					tooltip: true,
				},
				{
					title: '属性内容',
					key: 'value',
					minWidth: 200,
					align: 'center',
					resizable: true,
					tooltip: true,
				},
			],
			columns3: [
				// {
				//     key: "selection",
				//     type: "selection",
				//     width: 60,
				//     align: "center",
				// },
				{
					title: '序号',
					key: 'index',
					type: 'index',
					width: 100,
					align: 'center',
					render: (h, params) => {
						return h('span', params.index + (this.pageNum - 1) * this.pageSize + 1);
					},
				},
				{
					title: '业务类型',
					key: 'businessType',
					minWidth: 200,
					align: 'center',
					resizable: true,
					tooltip: true,
				},
				{
					title: '数量',
					key: 'quantity',
					minWidth: 200,
					align: 'center',
					resizable: true,
					tooltip: true,
				},
				{
					title: '类型',
					key: 'operationType',
					minWidth: 200,
					align: 'center',
					resizable: true,
					tooltip: true,
				},
				{
					title: '操作人',
					key: 'operation',
					minWidth: 200,
					align: 'center',
					resizable: true,
					tooltip: true,
				},
				{
					title: '操作时间',
					key: 'operationTime',
					minWidth: 200,
					align: 'center',
					resizable: true,
					tooltip: true,
				},
			],
			orgList: [], //功能位置
			dataArr: [],
			dataArr2: [],
			dataArr3: [],
			row3: {},
			delFaultCodeShowF: false, //是否显示删除弹窗
			pageSizeOption: [10, 20, 30, 40],
			delIds: [],
			delIds2: [],
			selection: [],
			checkBtnPermission: {},
			createByOptions: [],
			ruleValidate: {
				companyId: [
					{
						required: true,
						message: '请选择公司',
						trigger: 'blur',
						type: 'number',
					},
				],
				backupNo: [
					{
						required: true,
						message: '请填写仓库编号',
						trigger: 'blur',
						type: 'string',
					},
				],
				backupName: [{ required: true, message: '请填写仓库名称', trigger: 'blur' }],
				manageBy: [
					{
						required: true,
						message: '请选择管理员',
						trigger: 'blur',
						type: 'number',
					},
				],
			},
		};
	},
	mounted() {
		this.getTableColumnsWidth(this.columns);
		this.searchList();
	},
	methods: {
		getSearch(arg) {
			this.searchParams = JSON.parse(JSON.stringify(arg[0]));
			if (this.searchParams.time && this.searchParams.time.length) {
				this.searchParams.createStartTime = this.searchParams.time[0];
				this.searchParams.createEndTime = this.searchParams.time[1];
				delete this.searchParams.time;
			}
			this.pageNum = 1;
			this.changeNum();
		},
		showRowDetail(row) {
			this.dataArr2 = [
				{
					name: '班次',
					value: row.shift || '--',
				},
				{
					name: '工作中心',
					value: row.workCenter || '--',
				},
				{
					name: '工序',
					value: row.workingProcedure || '--',
				},
				{
					name: '卷号',
					value: row.volumeNumber || '--',
				},
				{
					name: '材料牌号',
					value: row.materialMark || '--',
				},
			];
			this.showDetailDialog = true;

			// this.axios({
			//     url: '',
			//     method: 'post',
			//     data: {
			//         ...row
			//     }
			// }).then(res => {
			//     if (res.code == 200) {
			//         this.dataArr2 = res.data;
			//         this.showDetailDialog = true
			//     } else {
			//         this.$Message.warning(({ content: res.msg, duration: 6, closable: true }));
			//     }

			// })
		},
		showRowDetail2(row) {
			this.dataArr3 = [];
			this.row3 = row;
			this.searchList3();
		},
		async searchList3() {
			const row = this.row3;
			const res = await this.axios({
				url: '/dms/WarehouseDetailsRecord/queryWarehouseDetailsRecordList',
				method: 'post',
				data: {
					pageNum: this.pageNum3,
					pageSize: this.pageSize3,
					warehouseLocation: row.warehouseLocation,
					materialCode: row.materialCode,
					batchNumber: row.batchNumber,
				},
			});
			if (res.code == 200) {
				this.showDetailDialog3 = true;
				this.dataArr3 = res.data.records;
				this.total3 = res.data.total;
			} else {
				this.$Message.warning({ content: res.msg, duration: 6, closable: true });
			}
		},
		//获取仓库
		getBackupList(data) {
			// if(!this.searchParams.companyId){
			//     this.$Message.warning(({ content:"请先选择公司", duration: 6, closable: true }));
			//     return false;
			// }
			let params = {
				companyId: data,
			};
			getBackup(params)
				.then((res) => {
					if (res.code === 200) {
						this.backupList = res.data;
					}
					// else {
					//     this.$Message.warning(({ content: res.msg, duration: 6, closable: true }));
					// }
				})
				.finally(() => {
					this.loading = false;
				});
		},
		//获取管理员
		getUserList() {
			getUserSelect()
				.then((res) => {
					if (res.code === 200) {
						this.createByOptions = res.data.map((item) => {
							return {
								...item,
								showName: item.empno + '----' + item.username,
							};
						});
					} else {
						this.createByOptions = [];
						this.$Message.warning({
							content: res.msg,
							duration: 6,
							closable: true,
						});
					}
				})
				.finally(() => {
					this.loading = false;
				});
		},
		reset() {
			this.searchParams = {};
			this.changeNum();
		},
		//分页
		changeNum() {
			this.pageNum = 1;
			this.searchList();
		},
		changePageSize(pageSize) {
			this.pageSize = pageSize;
			this.searchList();
		},

		changePageNum(val) {
			this.pageNum = val;
			this.searchList();
		},
		//分页
		changeNum3() {
			this.pageNum3 = 1;
			this.searchList3();
		},
		changePageSize3(pageSize) {
			this.pageSize3 = pageSize;
			this.searchList();
		},

		changePageNum3(val) {
			this.pageNum3 = val;
			this.searchList3();
		},
		//查询列表
		searchList() {
			let params = {
				pageNum: this.pageNum,
				pageSize: this.pageSize,
				...this.searchParams,
			};
			if (params.warehouseLocation && params.warehouseLocation.length > 0) {
				params.warehouseLocationCode = [params.warehouseLocation.at(-1)];
				delete params.warehouseLocation;
			} else delete params.warehouseLocation;
			this.axios({
				method: 'post',
				url: '/dms/warehouseDetails/getWarehouseDetailsList',
				data: params,
			}).then((res) => {
				if (res.code === 200) {
					this.dataArr = res.data.records;
					this.total = res.data.total;
				} else {
					this.$Message.warning({
						content: res.msg,
						duration: 6,
						closable: true,
					});
				}
			});
		},
		/*导入*/
		importExcelShow() {
			this.importExcelState = true;
		},
		importExcelChange(val) {
			this.importExcelState = false;
			if (val === 'success') {
				this.changeNum();
			}
		},
		//导出
		exportTemplateClick() {
			let params = {
				// delIds: this.delIds
			};
			for (let key in this.searchParams) {
				if (this.searchParams[key]) {
					this.$set(params, key, this.searchParams[key]);
				}
			}
			if (params.warehouseLocation && params.warehouseLocation.length > 0) {
				params.warehouseLocationCode = [params.warehouseLocation.at(-1)];
				delete params.warehouseLocation;
			} else delete params.warehouseLocation;
			const filName = '仓库明细查询';
			this.axios({
				url: '/dms/warehouseDetails/export',
				method: 'post',
				data: params,
				responseType: 'blob',
			}).then((res) => {
				fileDownload(res, filName + '.xls');
			});
		},
	},
};
</script>

<style scoped lang="scss">
.ivu-input-number {
	width: -webkit-fill-available;
}
.row_click {
	cursor: pointer;
	color: rgb(50, 113, 240) !important;
}
</style>
